<template>
  <Row>
    <Col span="24">
    <button-switchover></button-switchover>
    <div class="swiper-container swiper-container-activityForecast">
      活动预告
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          @click="toDetails"
        >
          <div class="listHd">
            <div class="listHd-top">
              <img
                src="../../assets/footerBg.jpg"
                alt=""
              >
            </div>
            <div class="listHd-content">
              <h2>活动预告-1</h2>
              <p class="fl">时间：2018-6-19至2018-6-29</p>
              <p class="fr">地址：常州市常州市常州市…</p>
              <div class="clear"></div>
            </div>
            <div class="listHd-bottom clear">
              <a
                class="fr"
                href=""
              >了解详情</a>
              <div class="clear"></div>
            </div>
          </div>
        </div>
        <div
          class="swiper-slide"
          @click="toDetails"
        >
          <div class="listHd">
            <div class="listHd-top">
              <img
                src="../../assets/footerBg.jpg"
                alt=""
              >
            </div>
            <div class="listHd-content">
              <h2>活动预告-1</h2>
              <p class="fl">时间：2018-6-19至2018-6-29</p>
              <p class="fr">地址：常州市常州市常州市…</p>
              <div class="clear"></div>
            </div>
            <div class="listHd-bottom clear">
              <a
                class="fr"
                href=""
              >了解详情</a>
              <div class="clear"></div>
            </div>
          </div>
        </div>
        <div
          class="swiper-slide"
          @click="toDetails"
        >
          <div class="listHd">
            <div class="listHd-top">
              <img
                src="../../assets/footerBg.jpg"
                alt=""
              >
            </div>
            <div class="listHd-content">
              <h2>活动预告-1</h2>
              <p class="fl">时间：2018-6-19至2018-6-29</p>
              <p class="fr">地址：常州市常州市常州市…</p>
              <div class="clear"></div>
            </div>
            <div class="listHd-bottom clear">
              <a
                class="fr"
                href=""
              >了解详情</a>
              <div class="clear"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <!--左箭头-->
      <div class="swiper-button-next"></div>
    </div>
    </Col>
  </Row>

</template>

<script>
import buttonSwitchover from '../../components/buttonSwitchover'
export default {
  components: {
    buttonSwitchover
  },
  mounted() {
    new Swiper('.swiper-container-activityForecast', {
      effect: 'coverflow',
      initialSlide: 1,
      slidesPerView: 3,
      centeredSlides: true,
      coverflowEffect: {
        rotate: 310,
        stretch: 0,
        depth: 80,
        modifier: 1,
        slideShadows: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  },
  methods: {
    toDetails() {
      this.$router.push({
        name: 'activityForecast_details'
      })
    }
  }
}
</script>

<style scoped>
</style>